import React, { Component } from 'react';
import AceEditor from 'react-ace';
import 'brace/mode/css';
import 'brace/theme/github';
export default function Root(props){
  const [state,setState]=React.useState( {
      mode: 'css',
      displayAce: 'none',
    });
    var d = new Date();
    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-end',
          position: 'absolute',
          top: 0,
          right: 0,
        }}
      >
        <button
          onClick={() => {
            if (state.displayAce == 'none') {
              setState({...state, displayAce: 'block' });
            } else {
              setState({...state, displayAce: 'none' });
            }
          }}
        >
          edit style
        </button>
        <AceEditor
          style={{
            display: state.displayAce,
            width: '300px',
            height: '300px',
            border: 'solid gray 5px',
          }}
          mode={state.mode}
          theme="github"
          value={props.css}
          onChange={props.cssChange}
          name={'' + d}
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
}
